<template>
  <div class="common-layout">
    <el-container class="w-1200px mx-auto">
      <el-aside class="bg-white rounded-8px w-200px py-34px">
          <div class="flex mb-10px">
            <div class="self-center flex ml-30px mr-15px"><el-icon class="" :size="20"><ChatDotRound /></el-icon></div>
            <div class="self-center text-16px font-600">智能互动</div>
          </div>
          <block v-for="(item,index) in menuList" :key="index">
              <div class="text-14px my-8px font-600 sub-route">
                  <router-link :class="{ 'router-link-active': activeTab === item.path }" :to="item.path">{{ item.name }}</router-link>
              </div>
          </block>
      </el-aside>
      <el-main class="p-0 ml-20px w-980px">
        
          <router-view />
      </el-main>
      
    </el-container>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="完成天数"
    width="500"
    :before-close="handleClose"
  >
    <el-input v-model="planDays" :placeholder="placeholderPlandays" />
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="setPlan()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { systemApi,userApi,httpApi } from '../api/api'
  import { configStore } from '../stores/config'
  import { diffTwoDates,getToday } from '../utils/tool'
  import { ElMessage, ElMessageBox,ElLoading  } from 'element-plus'
  import { ref,onMounted,watch,computed } from "vue"
  import { useRoute } from 'vue-router'
  const menuList = ref([
    {name:"同学社区",identifier: 'classmate',path:"/interaction/classmate"},
    {name:"游戏竞赛",identifier: 'race',path:"/interaction/race"},
  ])
  const dialogVisible = ref(false)
  const config = configStore()
  const lessonData = ref({})
  const route = useRoute()
  let diffDays = ref(0) 
  let placeholderPlandays = ref("请输入完成天数")
  let planDays = ref("")
  let distanceText = ref("")
  let distance = ref([])

  const init = async ()=>{
    lessonData.value = config.getBook()
    let today = getToday()
    let resLessonExamTime = await httpApi.getLessonExamtime()
    const configDate = config.getConfig()
    configDate.examTime = resLessonExamTime.data.exam_time

    let examDate = configDate.examTime
      //config.setConfig(configDate) ///设置缓存的考试时间
    diffDays.value = diffTwoDates(today,examDate)
      //console.log("相差几天",diffDays)
    if(diffDays.value >= 0){
      distance.value = diffDays.value.toString().split("")
      placeholderPlandays.value = `请输入完成天数(1-${diffDays.value}天)`
      distanceText.value = "距离考试还有："
    }else{
      distanceText.value = "考试已超期："
      distance.value = Math.abs(diffDays.value).toString().split("")
    }
    
    //console.log(distanceText.value)
  }

  const setPlan = async ()=>{
    if(planDays.value > diffDays.value){
      ElMessage.error('请设置合理的完成天数')
      return
    }
    let params = {
      planDays : planDays.value
    }
    const loading = ElLoading.service({
      lock: true,
      text: '计划制定中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    let res = await httpApi.setPlan(params)
    loading.close()
    if(res.code){
      ElMessage.success(res.msg)
      dialogVisible.value = false
    }else{
      ElMessage.error(res.msg)
    }

  }
  const activeTab = computed(() => {
      console.log("测试：",menuList.value.find(tab => 
          tab.identifier === route.meta.tabIdentifier
      )?.path)
      return menuList.value.find(tab => 
          tab.identifier === route.meta.tabIdentifier
      )?.path
  })
  // 科目变化时加载
  watch(() => config.$state.currentBook.book_id, () => {
    init()
  })
  onMounted(()=>{
    init()
  })

</script>
<style scoped>
  .sub-route a:link{
    padding:12px 54px;
    
    display:block;
    text-align:center;
  }
  .sub-route a:hover,.sub-route .router-link-active{
    padding:12px 54px;
    border-left:4px solid #fc5751;
    background-color: rgba(254, 226, 226, 1);
    display:block;
    text-align:center;
  }
  .planHeader{
      padding:30px;
      background:#999;
      background: url(../../public/images/dayplan-bg.png) no-repeat;

  }
  .dayBg{
    background: url("../../public/images/day-bg2.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

</style>